<template>
  <div>
    <ul
      :class="questionType === 5 ? 'inline-option-list' : 'block-option-list'"
    >
      <li
        v-for="(option, optionIndex) in optionList"
        :key="option.OptionId"
        :class="{'show-answer': showAnswer, 'right-answer': showAnswer && option.IsRight,
                 'error-answer': isOptionChecked(option.OptionId) && showAnswer &&
                   !option.IsRight}"
        class="option"
      >
        <label
          :class="{
            'not-selectable': showAnswer,
            'single-choose': isRadio}"
          class="option-content"
        >
          <!-- :checked="isOptionChecked(option.OptionId)" -->
          <template>
            <input
              v-model="userAnswer"
              :value="option.OptionId"
              :disabled="showAnswer"
              :type="isRadio ? 'radio' : 'checkbox'"
              class="choose-input"
              @change="onInputChange"
            >
            <template v-if="isOptionChecked(option.OptionId)">
              <!-- <span
                v-if="showAnswer && !option.IsAnswer"
                class="error-img-box"
              >
                <van-icon name="cross" />
              </span> -->
              <span
                class="option-button cur-chosen"
              >
                {{ optionNames[optionIndex] }}
              </span>
            </template>
            <span
              v-else
              class="option-button not-choose"
            >
              {{ optionNames[optionIndex] }}
            </span>
          </template>
          <VHtml
            v-if="questionType !== 5"
            tag="span"
            class="option-content-text"
            :html="option.OptionName"
          />
        </label>
      </li>
    </ul>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import { SET_QUESTION } from '@/store/mutations'
export default Vue.extend({
  components: {
    VHtml: () => import('components/VHtml.vue'),
  },
  // eslint-disable-next-line vue/require-default-prop
  // eslint-disable-next-line vue/require-prop-types
  props: [
    // eslint-disable-next-line vue/require-prop-types
    'optionList', 'isRadio', 'questionType', 'showAnswer', 'userSelect',
    // eslint-disable-next-line vue/require-prop-types
    'questionId', 'index',
  ],
  data () {
    return {
      userAnswer: this.userSelect,
      optionNames: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'],
      inputValue: '',
    }
  },
  beforeUpdate () {
    if (this.userSelect !== this.userAnswer) {
      this.userAnswer = this.userSelect
    }
  },
  methods: {
    isOptionChecked (optionId: any) {
      if (this.isRadio) {
        return this.userAnswer === optionId
      } else {
        if (this.userAnswer.length === 0) {
          return false
        }
        return this.userAnswer.indexOf(optionId) > -1
      }
    },
    onInputChange (e: any) {
      console.log(e.target.value, 'e.target.value', this.userAnswer)
      this.$emit('input', this.userAnswer)
    },
  },
})
</script>

<style lang="scss" scoped>
.block-option-list {
  margin: 20px 0 60px;
  .option + .option {
    margin-top: 50px;
  }
}
.inline-option-list {
  margin: 40px 0;
  .option {
    display: inline-block;
    width: 132px;
    text-align: center;
    margin-bottom: 40px;
  }
  .right-answer,.error-answer {
    &::after {
      top: auto;
      right: 50%;
      bottom: -30px;
      transform: translate(50%);
    }
  }
}
.option {
  position: relative;
  // padding-left: 24px;
  color: #666;
  text-align: left;
}
.option-button {
  display: inline-block;
  // color: #9A9A9A;
  color: #333333;
  background: #F6F6F6;
  width: 60px;
  height: 60px;
  line-height: 60px;
  padding: 0;
  font-size: 28px;
  text-align: center;
  // @include px1border(all, #ddd);
  @include px1border(all, #F6F6F6);
  border-radius: 4px;
}
// .rightOrCur-chosen {
//   color: #fff !important;
//   background: $primary-web;
//   + .option-content-text {
//     color: $primary-web;
//   }
// }
.cur-chosen {
  color: #fff !important;
  background: #4B515E;
  @include px1border(all, #4B515E);
}
.error-img-box {
  display: inline-block;
  width: 60px;
  height: 60px;
  line-height: 60px;
  padding: 0;
  margin-top: -2px;
  vertical-align: top;
  color: #fff;
  text-align: center;
  line-height: 60px;
  @include themeColor(width, background-color);
  + .option-content-text {
    color: $error-web;
  }
}
.single-choose {
  .error-img-box, .option-button {
    border-radius: 50%;
  }
  .option-button {
    font-size: 36px;
  }
}
.van-icon-cross {
  vertical-align: text-bottom;
}
.choose-input {
  display: none;
}
.right-answer {
  // .option-content-text {
  //   color: $primary-web;
  // }
  // .option-button {
    // background: $primary-web;
    // color: #FFF;
    // @include px1border(all, $primary-web);
    // @include themeColor(color);
  // }
  &::after {
    content: '';
    position: absolute;
    right: 0;
    top: 22px;
    // line-height: 30px;
    // vertical-align: middle;
    background: url('~assets/exam/right-img.png') no-repeat;
    background-size: 24px 16px;
    width: 24px;
    height: 16px;
    // color: #04CABC;
  }
}
.error-answer {
  &::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20px;
    background: url('~assets/exam/error-img.png') no-repeat;
    background-size: 20px 19px;
    width: 20px;
    height: 19px;
    // color: #CC3300;
  }
}
.option-content {
  color: #666;
  line-height: 60px;
  font-size: 32px;
  display: block;
}
.option-content-text {
  display: inline-block;
  vertical-align: top;
  margin-left: 30px;
  width: calc(100% - 135px);
  word-wrap:break-word;
  word-break:break-all;
  border: none !important;
  /deep/ img {
    max-width: 100%;
    display: block;
    margin-top: 20px;
  }
  /deep/ table {
    width: 100%;
    margin: 20px 0;
    td, th {
      // border: 1px solid #ddd;
      // border-color: #ddd;
      // border-width: 1px;
      // border-style: solid;
      @include px1border(all, #ddd);
      padding: 5px 10px;
    }
    caption {
      // border: 1px solid;
      @include px1border(all, #ddd);
      border-bottom: 0;
      text-align: center;
    }
  }
}
.error-selected {
  width: 60px;
  height: 60px;
  display: inline-block;
  vertical-align: top;
  // display: none;
}
.error-selected-img {
  width: 100%;
  height: 100%;
}
</style>
